<template>
<div>
    <mt-header fixed title="我的"></mt-header>
    <div class="heard">
        <div class="heard-img">
            <img src="../../../assets/image/mine.svg"/>
        </div>
        <div>
            <p>{{name}}</p>
            <p>{{phone}}</p>
        </div>
    </div>
    <div v-show="'supervisor'!==statu">
    <div class="region">
        <mt-cell v-for="item in equipmentList" :title="item.title" :to="item.href" is-link :key="item.href">
       <img slot="icon" :src="item.src"  width="18" height="18" class="region-img"/>
         </mt-cell>
    </div>
    <div class="region">
         <mt-cell v-for="item in basicList" :title="item.title" :to='item.href' is-link  :key="item.href">
       <img slot="icon" :src="item.src" width="18" height="18" class="region-img"/>
         </mt-cell>
    </div>
    </div>
    <div v-show="'supervisor'===statu">
      <div class="region">
         <mt-cell v-for="item in supervisor" :title="item.title" :to='item.href' is-link  :key="item.href">
       <img slot="icon" :src="item.src" width="18" height="18" class="region-img"/>
         </mt-cell>
    </div>
    </div>
    <mt-cell  title="退出"  is-link   @click.native="outClick">
       <img slot="icon" :src="outSet" width="18" height="18" class="region-img"/>
    </mt-cell>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      outSet: require('../../../assets/image/out.svg'),
      equipmentList: [
        {
          title: '站点管理',
          href: '/place',
          src: require('../../../assets/image/place.svg')
        },
        {
          title: '设备管理',
          href: '/equipmentActive',
          src: require('../../../assets/image/equipment-active.svg')
        },
        {
          title: '历史记录',
          href: '/historicalRecord',
          src: require('../../../assets/image/historical-record.svg')
        },
        {
          title: '火警通知',
          href: '/notice',
          src: require('../../../assets/image/notice.svg')
        }, {
          title: '推送管理',
          href: '/push',
          src: require('../../../assets/image/push.svg')
        }, {
          title: '考勤管理',
          href: '/attendance',
          src: require('../../../assets/image/attendance.svg')
        }],
      basicList: [{
        title: '常见问题',
        href: '/problem',
        src: require('../../../assets/image/problem.svg')
      },
      {
        title: '客服电话',
        href: '/telephone',
        src: require('../../../assets/image/telephone.svg')
      }],
      supervisor: [
        {
          title: '下属单位',
          href: '/subordinateUnits',
          src: require('../../../assets/image/subordinateUnits.svg')
        }, {
          title: '业主单位',
          href: '/ownerUnit',
          src: require('../../../assets/image/ownerUnit.svg')
        }, {
          title: '维保单位',
          href: '/maintenanceUnit',
          src: require('../../../assets/image/maintenanceUnit.svg')
        }, {
          title: '重点站点',
          href: '/keySites',
          src: require('../../../assets/image/keySites.svg')
        }, {
          title: '所有建筑',
          href: '/allBuildings',
          src: require('../../../assets/image/buildings.svg')
        }, {
          title: '危险源',
          href: '/hazardSource',
          src: require('../../../assets/image/hazardSource.svg')
        }
      ]
    }
  },
  computed: {
    statu () {
      return this.$store.state.loginState
    },
    phone () {
      return this.$store.state.phone
    },
    token () {
      return this.$store.state.token
    },
    name () {
      return this.$store.state.user.aliasname
    }

  },
  methods: {
    async outClick () {
      MessageBox.confirm('你确定退出？').then(async action => {
        // 退出登陆
        const parm = {
          token: this.token
        }
        const res = await this.$store.dispatch('quitLanding', parm)
        if (res.status === '0') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.heard{
    margin-top: 37px;
    padding: 20px;
    font-size: 16px;
    display: -webkit-box;
    -moz-box-align: center;
    div{
        p{
           line-height: 30px;
        }
    }
    &-img{
        width: 60px;
        height: 60px;
        margin-right: 20px;
        img{
            height: 60px;
            width: 60px;
            border-radius: 50%;
        }
    }
}
.region{
    &::before{
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: #ccc;
    }
    &-img{
        margin: 0 6px;
    }
}

</style>
